<template>
	<view class="order_detail">
		<!-- #ifndef MP-WEIXIN -->
		<my-navbar leftText="退货单详情" @leftClick="leftClick"></my-navbar>
		<!-- #endif -->

		<view class="padding order_info">
			<view class="pay">
				<view>
					<text class="title">基础信息</text>
					<!-- <text class="red_font" v-if="orderInfo.pay_status==0">未支付</text>
					<text class="dgreen" v-else-if="orderInfo.order_status==0">待审核</text>
					<text class="dgreen" v-else-if="orderInfo.order_status==1">备货中</text>
					<text class="dgreen" v-else-if="orderInfo.order_status==2">配送中</text>
					<text class="dgreen" v-else-if="orderInfo.order_status==3">已收货</text>
					<text class="gray_font" v-else-if="orderInfo.order_status==4">已取消</text> -->
				</view>
				<view><text>退货单号</text><text>{{orderInfo.order_sn}}</text></view>
				<view><text>单据状态</text>
					<text v-if="orderInfo.status==0">待审核</text>
					<text v-else-if="orderInfo.status==3">已完成</text>
					<text v-else-if="orderInfo.status==4">已取消</text>
					<text v-else>待退款</text>
				</view>
				<view><text>退货原因</text><text>{{orderInfo.return_remark}}</text></view>
				<view><text>申请日期</text><text>{{orderInfo.createdTime}}</text></view>
				<view><text>审核日期</text><text>{{orderInfo.checkTime}}</text></view>
				<view><text>关联订单</text><text>{{orderInfo.related_order_sn}}</text></view>
				<view><text>订单配送日期</text><text>{{orderInfo.orderSendTime}}</text></view>
				<view><text>取消原因</text><text>{{orderInfo.reject_remark}}</text></view>
			</view>
			<view class="money">
				<view><text class="title">金额信息</text></view>
				<view><text>申请金额</text><text class="red_font">￥{{Number(orderInfo.apply_money).toFixed(2)}}</text></view>
				<view><text>实退金额</text><text class="red_font">￥{{Number(orderInfo.real_money).toFixed(2)}}</text></view>
			</view>
			<view class="good_info">
				<view class="title"> 商品信息 </view>
				<view class="sign_good" v-for="(item, index) in goodsList" :key="index">
					<view class="flex-middle top">
						<view class="imgs flex-middle">
							<img class="img" :src="item.img" mode="aspectFit" alt="">
							<!-- <image class="logo" v-if="showLogo==1" :src="logo" mode="aspectFit"></image> -->
						</view>
						<text class="name">{{item.goods_name}}</text>
						<!-- <text class="spu">{{item.spu_name}}</text> -->
					</view>
					<view class="row ">
						<text>申请数量：{{Number(item.apply_num)}}</text>
						<text>实退数量：{{orderInfo.status==2||orderInfo.status==3?Number(item.real_num):0}}</text>
					</view>
					<view class="row ">
						<text v-show="canshowprice">申请单价：￥{{Number(item.apply_price).toFixed(2)}}</text>
						<text v-show="canshowprice">实退单价：￥{{orderInfo.status==2||orderInfo.status==3?Number(item.real_price).toFixed(2):'0.00'}}</text>
					</view>
					<view class="row ">
						<text>申请金额：￥{{Number(item.apply_money).toFixed(2)}}</text>
						<text>实退金额：￥{{orderInfo.status==2||orderInfo.status==3?Number(item.real_money).toFixed(2):'0.00'}}</text>
					</view>
					<view>备注：<text class="note">{{item.remark}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {$https} from "@/static/js/request.js";
	import MixinShowprice from '@/static/js/mixinshowprice.js'
	export default {
		data() {
			return {
				logo: '',
				showLogo: 0,
				orderInfo: {}, //订单信息
				goodsList: [], //商品列表
			};
		},
		mixins:[MixinShowprice],
		onReady() {
			getApp().setTitle()
		},
		onLoad(option) {
			this.getData(option.id);
			this.logo = uni.getStorageSync('logo');
			this.showLogo = uni.getStorageSync('showLogo');
		},
		methods: {
			getData(id) {
				$https("GET", "orderReturnDetail", {id: id}, (res) => {
					var info = res.data.data.order_info;
					var ms1 = Number(info.created_at + '000');
					info.createdTime = this.timestampToDate(ms1);
					//可能为0
					if(info.check_time){
						var ms2 = Number(info.check_time + '000');
						info.checkTime = this.timestampToDate(ms2);						
					}
					if(info.order_send_time){
						var ms3 = Number(info.order_send_time + '000');
						info.orderSendTime = this.timestampToDate(ms3);						
					}
					this.orderInfo = info;
					this.goodsList = res.data.data.goods_info;
				});
			},
			timestampToDate(ms){
				var now = new Date();
				now.setTime(ms);
				var date = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
				return date;
			},
			leftClick() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},
		},
	};
</script>

<style lang="scss" scoped>
	.order_info {
		.prop {
			white-space: nowrap;
			margin-right: 20rpx;
		}

		.pay>view,
		.money>view {
			margin-top: 20rpx;
		}

		.gray_font {
			color: gray;
		}
	}

	.order_detail {

		.pay>view,
		.money>view {
			display: flex;
			justify-content: space-between;
		}

		.pay,
		.money {
			border-bottom: 1px solid #E8E9E9;
			padding: 10rpx 0 18rpx;
		}

		.pay>view:nth-child(n + 2) text:last-child {
			color: gray;
		}

		.good_info {
			padding-top: 25rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.good_info {
		padding-bottom: 40rpx;

		.title {
			margin-bottom: 14rpx;
		}

		.sign_good {
			font-size: 24rpx;
			background: #fff;
			border-radius: 14rpx;
			padding: 20rpx 40rpx;
			margin-top: 20rpx;

			+.sign_good {
				margin-top: 20rpx;
			}

			.top {
				margin-bottom: 20rpx;

				.imgs {
					width: 120rpx;
					height: 120rpx;
					position: relative;

					.logo {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}

					.img {
						width: 120rpx;
						max-height:100rpx;
						margin-right: 40rpx;
					}
				}

				.name {
					margin-left: 20rpx;
				}
			}

			.row {
				margin-bottom: 20rpx;

				text:first-child {
					display: inline-block;
					width: 60%;
				}
			}

			.note {
				color: #9A9A9A;
			}

			.spu {
				margin-left: 20rpx;
				padding: 4rpx 8rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				font-size: 24rpx;
				transform: scale(0.8);
			}
		}

	}
</style>
